let hubei = './json/hubei.json';
let markers = new Array();
let layerGroup = L.layerGroup(markers);
let myMap;
const vue = new Vue({
    el: '#app',
    data: {
        selected: 'base',
        myChart: null,
        estateName: '',
        estateType: '',
        county: '',
        village: '',
        estateTypes: [],
        countyList: [],
        villageList: []
    },
    methods: {
        search(type) {
            let value = '';
            switch (type) {
                case 1:
                    value = this.estateName;
                    break;
                case 2:
                    value = this.estateType;
                    break;
                case 3:
                    value = this.county;
                    break;
                case 4:
                    value = this.village;
            }
            $.getJSON(`./api/search/base/${type}`, {
                value: value
            }, res => {
                if (res.success) {
                    this.rendering(res.data.items ? res.data.items : []);
                } else {
                    this.$alert('查询接口错误', '警告', {
                        confirmButtonText: '确定',
                        callback: () => {
                            location.reload();
                        }
                    });
                }
            })
        },
        clear() {
            layerGroup.clearLayers();
            this.estateName = '';
            this.estateType = '';
            this.county = '';
            this.village = '';
        },
        rendering(data) {
            // 去除旧数据
            layerGroup.clearLayers();
            markers = new Array();
            // 数据修改
            let result = {};
            for (let i = 0; i < data.length; i++) {
                if (result[data[i].id]) {
                    if (result[data[i].id].type) {
                        let flag = true;
                        for (let j = 0; j < result[data[i].id].type.length; j++) {
                            if (result[data[i].id].type[j].name == data[i].typeName) {
                                result[data[i].id].type[j].info.push(data[i].infoName);
                                flag = false;
                                break;
                            }
                        }
                        if (flag) {
                            result[data[i].id].type.push({
                                name: data[i].typeName,
                                info: [data[i].infoName]
                            })
                        }
                    } else {
                        result[data[i].id].type = [{
                            name: data[i].typeName,
                            info: [data[i].infoName]
                        }]
                    }
                } else {
                    result[data[i].id] = data[i]
                    result[data[i].id].type = [{
                        name: data[i].typeName,
                        info: [data[i].infoName]
                    }];
                }
            }
            // 渲染
            for (let i in result) {
                let marker = new L.marker([result[i].lat, result[i].lng]);
                marker.on('click', point => {
                    let html = `<div style="font-size: 24px;">${result[i].name}</div>`;
                    if (result[i].type) {
                        for (let j = 0; j < result[i].type.length; j++) {
                            html = html + `<div>产业：${result[i].type[j].name}</div>`;
                            if (result[i].type[j].info.length > 0) {
                                html = html + `<div>产品：</div>`;
                            }
                            for (let k = 0; k < result[i].type[j].info.length; k++) {
                                html = html + `<div>- ${result[i].type[j].info[k]}</div>`;
                            }
                        }
                    }
                    L.popup()
                        .setLatLng(point.latlng)
                        .setContent(html)
                        .openOn(myMap);
                })
                markers.push(marker);
            }
            layerGroup = L.layerGroup(markers);
            myMap.addLayer(layerGroup);
        }
    },
    mounted() {
        // 加载框
        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        // 初始化地图
        myMap = L.map('map').setView([
            31.222590731033245,
            112.27026642773436
        ], 7);

        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
        }).addTo(myMap);
        // 获取地图资源;
        $.get(hubei, (geoJson) => {
            //渲染方法
            let geojson = L.geoJSON(geoJson, {
                style: {
                    "color": "#309999",
                    "weight": 2,
                    "opacity": 1,

                },
            });
            geojson.addTo(myMap);
        });
        let step = 0;
        // 获取产业类型
        $.getJSON('./api/data/type', res => {
            if (res.success) {
                this.estateTypes = res.data.items;
                step++;
                if (step == 3) {
                    loading.close();
                }
            } else {
                this.$alert('后台服务器错误，请重试', '警告', {
                    confirmButtonText: '确定',
                    callback: () => {
                        location.reload();
                    }
                });
            }
        })
        $.getJSON('./api/data/county', res => {
            if (res.success) {
                this.countyList = res.data.items;
                step++;
                if (step == 3) {
                    loading.close();
                }
            } else {
                this.$alert('后台服务器错误，请重试', '警告', {
                    confirmButtonText: '确定',
                    callback: () => {
                        location.reload();
                    }
                });
            }
        })
        $.getJSON('./api/data/village', res => {
            if (res.success) {
                this.villageList = res.data.items;
                step++;
                if (step == 3) {
                    loading.close();
                }
            } else {
                this.$alert('后台服务器错误，请重试', '警告', {
                    confirmButtonText: '确定',
                    callback: () => {
                        location.reload();
                    }
                });
            }
        })
        myMap.addLayer(layerGroup);
    }
})